<template>
  <div class="main">
    <div class="header-wrapper">
      <div class="head-content"><a class="logo" href="" target="_blank"></a>
        <div class="search-wrapper">
          <div class="search-context"><input class="search-input" autocomplete="off" type="text" maxlength="255"
                                             value="" placeholder="请输入搜索内容">
            <div class="search-pannel">
            </div>
          </div>
          <div class="search-btn"></div>
        </div>
        <div class="nav-wrapper">
          <a class="link-item" href="">创作者招募</a>
          <a class="link-item" href="">视频上传</a>
          <a class="link-item" href="">企业机构认证</a>
          <a class="link-item" href="">MCN机构</a>
          <a class="link-item" href="">联系我们</a>
        </div>
      </div>
      <div style="z-index: 1;">
        <div class="">
          <div class="channel-wrapper">
            <ul class="channel-list">
              <li class="channel-item"><a href="/top" class="channel-link">推荐</a></li>
              <li class="channel-item"><a href="/know" class="channel-link">知识</a></li>
              <li class="channel-item"><a href="/films" class="channel-link ">影视</a></li>
              <li class="channel-item"><a href="/happy" class="channel-link">搞笑</a></li>
              <li class="channel-item"><a href="/baby" class="channel-link">萌娃</a></li>
              <li class="channel-item"><a href="/star" class="channel-link">明星</a></li>
              <li class="channel-item"><a href="/food" class="channel-link">美食</a></li>
<!--              <el-dropdown style="padding-top: 7px;font-size: 17px;font-weight: bold"  @command="handleCommand">-->
<!--                    <span class="el-dropdown-link" >-->
<!--                      其他类别<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                    </span>-->
<!--                <el-dropdown-menu  slot="dropdown">-->
<!--                  <el-dropdown-item style="width: 100px;"  v-for="(item,index) in Classity" :command="item.id" :key="index">{{item.className}}</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </el-dropdown>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Nav",
    data(){
      return{
        Classity:[{}]
      }
    },
    methods:{
      /*根据id分类查询电影*/
      handleCommand(command) {
        let _this = this
        this.$axios.post("http://localhost:8066/classity/getClassifyById/"+command).then(function(res){
          _this.tableData = res.data
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*查询类别*/
      findCategory(){
        let _this = this
        this.$axios.get("http://localhost:8066/classity/getClassify").then(function (res) {
          _this.Classity = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
    },
    mounted() {
      this.findCategory()
    }
  }
</script>

<style scoped>
  div {
    display: block;
  }

  .header-wrapper .head-content {
    width: 1250px;
    height: 80px;
    margin: 0 auto;
    padding: 20px 16px;
  }

  .header-wrapper .head-content .logo {
    float: left;
    width: 129px;
    height: 34px;
    background: url() 0 0/auto 100% no-repeat;
    cursor: pointer;
  }
  a {
    text-decoration: none;
  }

  a:-webkit-any-link {
    color: -webkit-link;
  }
  .search-wrapper {
    position: relative;
    float: left;
    width: 450px;
    height: 38px;
    margin: 0 0 0 32px;
    border-radius: 5px;
    background-color: #f5f5f5;
  }

  .search-wrapper .search-context {
    position: relative;
    width: 419px;
    height: 100%;
    padding-top: 1px;
  }

  .search-wrapper .search-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 81px;
    height: 38px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: auto;
    color: #fff;
    background: #ff1e66;
    background: url() 0 0/auto 100% no-repeat;
    cursor: pointer;
  }
  .search-wrapper .search-context .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    padding: 0 5px 5px 20px;
    border: 1px solid transparent;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
    outline: 0;
    background-color: transparent;
    caret-color: #ff4141;
  }

  .nav-wrapper {
    float: right;
    margin-top: 10px;
    font-size: 0;
  }
  .nav-wrapper .link-item {
    margin-left: 36px;
    font-size: 18px;
    color: #6f6f6f;
    cursor: pointer;
  }
  a {
    text-decoration: none;
  }

  .channel-wrapper {
    height: 40px;
    background: hsla(0,0%,97%,.96863);
    box-shadow: 1px 10px 12px rgba(228,228,228,0.94);
  }

  .channel-wrapper .channel-list {
    width: 1168px;
    height: 100%;
    margin: 0 auto;
  }
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  .channel-wrapper .channel-list .channel-item {
    float: left;
    list-style: none;
  }
  .channel-wrapper .channel-list .channel-item .channel-link {
    position: relative;
    display: block;
    padding: 0 60px;
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #000;
    cursor: pointer;
  }

  .channel-wrapper .channel-list .channel-item a:hover{
    font-weight: 900;
    color: #ff1e66;
  }


</style>
